<template>
  <div id='mm'>
    <canvas ref="yt" width="200" height="200"></canvas>
    <canvas ref="ms" width="200" height="200"></canvas>
    <div class="boxx">
        <span>请选择模糊度：</span>
        <input type="number" step="1" class="change inp" v-model="tnum" @change="changeMsk" placeholder="请选择模糊度" style='width:60px'/>
        <input type="file" name="" id="" @change="getFile" class="inp" style='width:70px'>
        <el-button @click="downImg" size="mini">导出图片</el-button>
    </div>
    
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, ref } from "vue";

export default {
  setup() {
    let { ctx } = getCurrentInstance();
    onMounted(() => {

      hyt();
    });
    var yt=null
    var ycan=null
    //画原图
    function hyt() {
       yt = ctx.$refs.yt;
       ycan = yt.getContext("2d");
     
      ycan.save();
      if(arguments.length>0){
        let pic =new Image()
           pic.src=arguments[0]
           pic.onload=function(){
              ycan.drawImage(pic,0,0,yt.width,yt.height)
              creatMsk(yt,ycan)
           }
      }else{
          let linger = ycan.createLinearGradient(0, 0, yt.width, yt.height);
          linger.addColorStop(0.1, "red");
          linger.addColorStop(0.5, "green");
          linger.addColorStop(0.6, "blue");
          linger.addColorStop(1.0, "yellow");
          ycan.fillStyle = linger;
          ycan.fillRect(0, 0, yt.width, yt.height);
      }
      
      
      ycan.restore();
      creatMsk(yt, ycan);
    }
    var ms=null
    var mcan=null
    function creatMsk(oldCan, oldctx,size=4) {
       ms = ctx.$refs.ms;
       mcan = ms.getContext("2d");
      let oldimg = oldctx.getImageData(0, 0, oldCan.width, oldCan.height);
      let newimg = mcan.createImageData(ms.width, ms.height);

      
      let w = ms.width;
      for (let i = 0; i < ms.width / size; i++) {
        for (let j = 0; j < ms.height; j++) {
          let color = getPx(
            oldimg,
            Math.floor(Math.random() * size) + i * size,
            Math.floor(Math.random() * size) + j * size,
            w
          );

          for (let a = 0; a < size; a++) {
            for (let b = 0; b < size; b++) {
              setPx(newimg, i * size + a, j * size + b, color, w);
            }
          }
        }
      }
      mcan.putImageData(newimg, 0, 0);
    }
    //获取图片data
    function getPx(imgdata, x, y, w) {
      let color = [];

      color[0] = imgdata.data[4 * (y * w + x)];
      color[1] = imgdata.data[4 * (y * w + x) + 1];
      color[2] = imgdata.data[4 * (y * w + x) + 2];
      color[3] = imgdata.data[4 * (y * w + x) + 3];
      return color;
    }
    //设置图片data
    function setPx(img, x, y, color, w) {
      img.data[4 * (y * w + x)] = color[0];
      img.data[4 * (y * w + x) + 1] = color[1];
      img.data[4 * (y * w + x) + 2] = color[2];
      img.data[4 * (y * w + x) + 3] = color[3];
    }
    let tnum=ref(1)
    function changeMsk(e) {
        if(tnum.value>0){
            creatMsk(yt,ycan,tnum.value-0)
        }else{
            ctx.$message.warning('请选择大于1的数')
            tnum.value=1
        }
        
    };
    function getFile(e){
      let file=e.target?.files[0]
      if(/image/g.test(file.type)){
        tnum.value=4
        let reader=new FileReader()
        reader.readAsDataURL(file)
        reader.onload=function(){
          hyt(reader.result)
        }
      }else{
        ctx.$message.warning('请选择图片')
      }
    }
    //下载
    function downImg(){
       let canImg=ms.toDataURL()
       let link=document.createElement('a')
       link.download='msk.jpg'
       link.href=canImg
       document.body.appendChild(link)
       link.click()
       document.body.removeChild(link)
    }
    return { changeMsk ,tnum,downImg,getFile};
  },
};
</script>

<style lang='less' scoped>
#mm{
  white-space: nowrap;
  overflow: hidden;
}
  .boxx{
    height: 25px;
    line-height: 25px;
    padding: 0;
    .inp{
        display: inline-block;

        height:25px;
        margin-right: 10px;
      }
    .el-button{
      width: 60px;
      height: 25px;
      padding: 0;
      text-align: center;
    }
  }
   

</style>